<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width:300px;
        height: 700px;
       background:  linear-gradient(to bottom,#F9FBCB,#F8F8F3);
    }
    h2{
        background-color: #518700;
        line-height: 30px;
        text-indent: 1em;
        font-size: 18px;
        color: white;
        background-image: url(图片素材/bang.gif);
        background-repeat: no-repeat;
        background-position: 130px  13px;
    
        height:38px;
        line-height: 38px;

    }
      ul li{

        color:#1A66B3;
        font-size:8px ;
    list-style: none;
        line-height: 28px;
    }
    img  {
        vertical-align: middle;


    }






</style>
<body>
    <div>
   <h2>畅销书排行   </h2> 
   <ul>
 <li><img  src=" C:\Users\Administrator\Desktop\作业二\图片素材\book_no01.gif" />&nbsp;不抱怨的世界(畅...
     </li> 
     <li><img  src="C:\Users\Administrator\Desktop\作业二\图片素材\book_no02.gif" />&nbsp;遇见未知的自己</li>
    <li><img  src=" C:\Users\Administrator\Desktop\作业二\图片素材\book_no03.gif" />&nbsp;活法（季羡林、... </li>
     
    
 <li> <img  src="C:\Users\Administrator\Desktop\作业二\图片素材\book_no04.gif" />&nbsp;高效能人士的七个习惯 </li>  
 <li> <img  src="C:\Users\Administrator\Desktop\作业二\图片素材\book_no06.gif" />&nbsp;被迫强大（北外女生香奈儿...  </li>  
 <li> <img  src="C:\Users\Administrator\Desktop\作业二\图片素材\book_no06.gif" />&nbsp;世界上最伟大的推销员（插... </li>  
 <li> <img  src=" C:\Users\Administrator\Desktop\作业二\图片素材\book_no07.gif" />&nbsp;我的成功可以复制（唐骏亲...</li>  
 <li><img  src=" C:\Users\Administrator\Desktop\作业二\图片素材\book_no08.gif" /> &nbsp;少有人走的路：心智成熟的... </li>  
 <li> <img  src=" C:\Users\Administrator\Desktop\作业二\图片素材\book_no09.gif" />&nbsp;活出全新的自己——唤醒...</li>
  
 
</ul>
</div>
</body>
</html>